<template>
  <div class="loginPage">
    <img class="top" src="../src/assets/images/login/登录表头.png" alt="">
    <div class="in">
      <!-- <img class="icon1" src="../src/assets/images/login/iPhoneicon.png" alt=""> -->
      <input class="ppp" type="number" v-model="phone" placeholder="请输入您的手机号">
    </div>
    <div class="in inin">
      <!-- <img class="icon2" src="../src/assets/images/login/codeicon.png" alt=""> -->
      <input class="sss" type="number" v-model="number" placeholder="请输入验证码">
      <div v-show="show" class="ccc">
        <img class="line" src="../src/assets/images/login/line.png" alt="">
        <img class="yzm" @click="getCode" src="../src/assets/images/login/getcode.png" alt="">
      </div>
      <div v-show="!show" class="ccc">
        <img class="line" src="../src/assets/images/login/line1.png" alt="">
        <span class="time">{{ time }}s后获取</span>
      </div>
    </div>

    <div @click="goLogin" class="loginbtn">
      <img src="../src/assets/images/login/登陆按钮.png" alt="">
    </div>


    <div class="bottom" v-if="butShow">
      <img @click="change" class="gou" :src="require(`../src/assets/images/login/${imglogo}.png`)" alt="">
      <p @click="showToast">同意<span>《用户协议》</span>及<span>《隐私策略》</span></p>
    </div>

    <div class="loginFail" v-show="isFail">
      <div class="fffail">
        <img class="failed" src="./assets/images/login/failed.png" alt="">
        <van-divider />
        <p>您所填写的信息输入不正确</p>
        <p>请确认输入信息无误后再次登录</p>
        <p>感谢您的配合</p>
        <img class="qd" @click="determine" src="../src/assets/images/login/登录失败-确定.png" alt="">
        <!--  -->
      </div>
    </div>

    <div class="toast" v-show="isShow">
      <div class="tosat-center">
        <span>用户隐私协议</span>
        <!-- <van-divider /> -->
        <div class="center11">
          <p>
            欢迎您使用脑常青筛查端裂变版服务。您在访问本平台或使用本平台服务时，本平台将会收集和使用您的相关信息。脑常青筛查端裂变版组非常重视每个用户的个人信息安全，并将竭力保护好您的个人信息隐私的安全。该《用户隐私政策》（以下简称“该政策”）适用于您对“脑常青筛查端裂变版”平台的访问，以及对本平台所提供的所有服务使用而提供或流出的信息。该政策将向您说明访问并使用本平台服务时如何收集、使用、保存、共享和转让这些信息的，以及本平台为您提供查询、更新、删除、保护以及注销这些信息的方式。
          </p>
          <p>用户信息保护与授权
          </p>
          <p>1.在用户认证过程中，您应按脑常青筛查端裂变版平台页面的提示准确、真实、完整地提供您的信息。您了解并同意，您有义务保持您提供信息的真实性、准确性、完整性及有效性。</p>
          <p>2.如果您的认证信息有所变更，您应当及时更新您提供的信息，京师智源（山东）医疗有限公司将依法不时地对您的信息进行检查核实，望您配合提供最及时、真实、完整的信息。</p>
          <p>
            3.若京师智源（山东）医疗有限公司按您最后一次提供的信息与您联系未果、您未按脑常青筛查端裂变版的要求及时提供信息、您提供的信息存在明显不实的，脑常青筛查端裂变版平台有权暂停或终止您使用脑常青筛查端裂变版服务，同时您将承担因此对您自身、他人及京师智源（山东）医疗有限公司造成的全部损失与不利后果。
          </p>
          <p>
            4.上述用户认证的审核和通过均由京师智源（山东）医疗有限公司最终决定。京师智源（山东）医疗有限公司可以根据用户上传的文件对其文件的真实性、合法性进行合理的质询和怀疑，并给与用户不通过认证的结果而无需提供任何原因；用户可以通过再次申请认证或申诉进行重新认证。
          </p>
          <p>
            5.依法保护用户个人信息是京师智源（山东）医疗有限公司的一项基本政策，在您使用脑常青筛查端裂变版服务时，您同意京师智源（山东）医疗有限公司按照脑常青筛查端裂变版的隐私权政策收集、存储、使用、披露和保护您的个人信息及非个人信息。京师智源（山东）医疗有限公司希望您通过脑常青筛查端裂变版隐私权政策使您清楚地了解京师智源（山东）医疗有限公司对您个人信息的处理方式。因此，京师智源（山东）医疗有限公司建议您完整、详细地阅读脑常青筛查端裂变版隐私权政策，以便更好地保护您的隐私权和个人信息。
          </p>
          <p>6.您声明并保证，您对您所发布的信息拥有相应、合法的权利。否则，京师智源（山东）医疗有限公司可对您发布的信息依法或依本协议进行删除或屏蔽。您应当确保您所发布的信息不包含以下内容：
          </p>
          <p>(1)违反国家法律法规禁止性规定的;</p>
          <p>(2)政治宣传、封建迷信、淫秽、色情、赌博、暴力、恐怖或者教唆犯罪的;
          </p>
          <p>(3)欺诈、虚假、不准确或存在误导性的;
          </p>
          <p>(4)侵犯他人知识产权或涉及第三方商业秘密及其他专有权利的;
          </p>
          <p>(5)侮辱、诽谤、恐吓、涉及他人隐私等侵害他人合法权益的;</p>
          <p>(6)存在可能破坏、篡改、删除、影响脑常青筛查端裂变版平台任何系统正常运行或未经授权秘密获取脑常青筛查端裂变版平台及其他用户的数据、个人资料的病毒、木马、爬虫等恶意软件、程序代码的;</p>
          <p>(7)其他违背社会公共利益或公共道德或依据相关脑常青筛查端裂变版协议、规则的规定不适合在脑常青筛查端裂变版平台上发布的。</p>
          <p>
            7.为方便您使用脑常青筛查端裂变版平台等相关服务以及提升您的服务体验，您授权京师智源（山东）医疗有限公司将您在账户注册和使用脑常青筛查端裂变版平台服务过程中提供、形成的信息传递给脑常青筛查端裂变版平台、第三方机构等其他相关服务提供者，或从脑常青筛查端裂变版平台、第三方机构、银行等其他相关服务提供者获取您在注册、使用相关服务期间提供、形成的信息。
          </p>
          <p>
            8.用户理解并同意，京师智源（山东）医疗有限公司可能会与第三方合作向用户提供相关的服务，在此情况下，如该等第三方同意承担与京师智源（山东）医疗有限公司同等的保护用户隐私的责任，则京师智源（山东）医疗有限公司有权将用户的注册资料等提供给该等第三方，用于向用户提供服务之目的。
          </p>
          <p>9.在不透露您个人信息的前提下，您授权京师智源（山东）医疗有限公司、北京京师脑科学研究院有限公司对整个用户数据库进行深度分析，并对用户数据库进行商业上的使用或大数据的开发和运用。</p>
          <p>
            10.对于用户提供、发布及在使用脑常青筛查端裂变版平台服务中形成的除个人信息外的文字、图片、视频、音频等非个人信息，用户授予京师智源（山东）医疗有限公司及其关联方、第三方支付机构、银行一项全球范围内的、免使用费的、不可撤销的、排他的可再分许可的使用权（不受本协议提前或到期终止的影响）并可以自身名义对第三方侵权行为取证及提起诉讼的权利。京师智源（山东）医疗有限公司及其关联方、第三方机构、银行有权存储、使用、复制、修订、编辑、发布、展示、翻译、分发用户的非个人信息或制作其衍生作品，并以已知或日后开发的形式、媒体或技术将上述资料纳入其他作品内。
          </p>


        </div>
        <div class="button2">
          <img @click="agree" src="../src/assets/images/login/同意.png" alt="">
          <img @click="disAgree" src="../src/assets/images/login/取消.png" alt="">
        </div>
      </div>
    </div>

  </div>
</template>

<script>

import { Toast, Dialog } from 'vant'
import axios from "axios";
import { login, getSmsCode, currentpacketstep, addburyingpoint, getUserData } from '@/api/http.js'
import {
  getUrl
} from "@/config.js";

export default {
  data() {
    return {
      phone: '',
      number: '',
      imglogo: 'gou',
      show: true,
      time: '',
      timer: null,
      isFail: false,
      isShow: false,
      butShow: true,
    };
  },
  methods: {
    // 判断手机号
    checkMobile(str) {
      var length = str.length;
      if (length == 11 &&
        /^(((13[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[0-9]{1})|(18[0-9]{1})|(14[0-9]{1})|(19[0-9]{1}))+\d{8})$/.test(str)
      ) {
        return true;
      } else {
        return false;
      }
    },
    // 获取验证码
    getCode() {
      if (this.phone == "") {
        Toast('请填写手机号');
        return;
      }
      if (!this.checkMobile(this.phone)) {
        Toast('请填写符合条件的手机号');
        return;
      }

      var userPhone = this.phone;
      console.log('手机号', userPhone);
      getSmsCode({ phone: userPhone }).then((res) => {
        console.log(res);
        // this.number = '1234'
        if (res.code == 200) {
          const TIME_COUNT = 180;
          if (!this.timer) {
            this.time = TIME_COUNT;
            this.show = false;
            this.timer = setInterval(() => {
              if (this.time > 0 && this.time <= TIME_COUNT) {
                this.time--;
              } else {
                this.show = true;
                clearInterval(this.timer);
                this.timer = null
              }
            }, 1000);
          }

        }
      })
    },
    // 登录
    goLogin() {

      var me = this;
      if (this.imglogo == 'gou') {
        Toast('请先同意用户协议及隐私政策')
      }
      else {
        login({
          phone: this.phone,
          smsCode: this.number
        }).then((res) => {
          console.log('登录', res);
          localStorage.setItem('token', res.data)
          if (res.code == 500 || res.code == 700) {
            this.isFail = true
          } else {
            let obj = { buriedPointName: '登录', section: '2', module: '1', function: '1', redirectPage: '信息填写页', orgNo: '' }
            addburyingpoint(obj).then(res => {
              console.log(res)
            })

            if (res.data) {
              currentpacketstep().then(res => {
                if (res.code != 500) {
                  console.log(res.data.router)
                  this.$router.push('/' + decodeURIComponent(res.data.router))
                } else {
                  getUserData().then(res => {
                    console.log(res)
                    if (res.rows[0].openId) {
                      this.$router.push('/activity')
                    } else {
                      window.location.href = 'https://www.yaoyaola.net/exapi/check_user/10814023?url=https://www.ainaoxingdong.com/brainshare/index.html&flag=0'
                    }
                  })
                  // this.$router.push('/activity')
                  // 
                }
              })
            }
            // this.$router.push('/activity')
          }

          // if (res.code == 500 || res.code == 700) {
          //   this.isFail = true
          // } else if (res.code == 701) {
          //   this.$router.push('/register')
          // } else if (res.code == 702) {
          //   Dialog.alert({
          //     message: '您是黑名单用户,请联系客服处理。客服电话:13439664969',
          //   }).then(() => {
          //     // on close
          //   });
          // }
          // else {

          // }

        })
      }

    },
    // 同意用户协议按钮
    change() {
      console.log('点击率')

      if (this.imglogo == 'gou') {
        this.imglogo = 'gou1'
      } else {
        this.imglogo = 'gou'
      }
    },
    // 登录失败弹窗
    determine() {
      this.isFail = false
    },
    agree() {
      this.isShow = false
      this.imglogo = 'gou1'
    },
    disAgree() {
      this.isShow = false
    },
    showToast() {
      this.isShow = true
    },
  },
  // methods: {
  //   SmsCode(){
  //     if (this.phoneInfo == "") {
  //       this.$message.error('请填写手机号');
  //       return;
  //     }
  //     if (!this.checkMobile(this.phoneInfo)) {
  //       this.$message.error('请填写符合条件的手机号');
  //       return;
  //     }
  //     getSmsCode( {
  //         phone: this.phoneInfo,
  //       }).then(res=>{
  //       console.log(res)
  //     })
  //   },
  //   getlogin(){
  //     if (this.phoneInfo == "") {
  //       this.$message.error('请填写手机号');
  //       return;
  //     }
  //     if (!this.checkMobile(this.phoneInfo)) {
  //       this.$message.error('请填写符合条件的手机号');
  //       return;
  //     }
  //     login({ phone: this.phoneInfo,
  //         smsCode: this.number}).then(res=>{
  //       console.log(res)
  //       console.log(res)
  //       localStorage.setItem('token',res.data)
  //       this.$router.push('/activity')
  //     })
  //   },
  //   // gosm(){
  //   //   var baseUrl = getUrl();
  //   //   axios.post(
  //   //     baseUrl + "/wechatuser/sendSmsCode",
  //   //     ///wechatuser/sendSmsCode
  //   //     // `https://www.ainaoxingdong.com/api/an/wechat_app/wechat_user/report/bind_img?token=${_this.token}`,
  //   //     {
  //   //       phone: this.phoneInfo,
  //   //     }
  //   //   ).then((res) => {
  //   //     console.log(res)



  //   //   });
  //   // },
  //   // login() {
  //     // if (this.phoneInfo == "") {
  //     //   this.$message.error('请填写手机号');
  //     //   return;
  //     // }
  //     // if (!this.checkMobile(this.phoneInfo)) {
  //     //   this.$message.error('请填写符合条件的手机号');
  //     //   return;
  //     // }
  //   //   var baseUrl = getUrl();
  //   //   console.log(this.phoneInfo)
  //   //   axios.post(
  //   //     baseUrl + "/wechatuser/login",
  //   //     ///wechatuser/sendSmsCode
  //   //     // `https://www.ainaoxingdong.com/api/an/wechat_app/wechat_user/report/bind_img?token=${_this.token}`,
  //   //     {
  //   //       phone: this.phoneInfo,
  //   //       smsCode: this.number
  //   //     }
  //   //   ).then((res) => {
  //   //     console.log(res)
  //   //     localStorage.setItem('token',res.data.data)
  //   //     this.$router.push('/activity')

  //   //   });
  //   // },
  //   checkMobile(str) {
  //     var length = str.length;
  //     if (length == 11 &&
  //       /^(((13[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[0-9]{1})|(18[0-9]{1})|(14[0-9]{1})|)+\d{8})$/.test(str)
  //     ) {
  //       return true;
  //     } else {
  //       return false;
  //     }
  //   },
  // },
  mounted() {
    var that = this
    // localStorage.getItem("");
    var win_h = document.body.clientHeight;//关键代码
    console.log('win_h', win_h);
    window.addEventListener('resize', function () {
      console.log('document', document.body.clientHeight, document.body.clientHeight < win_h);
      if (document.body.clientHeight < win_h) {
        that.butShow = false
      } else {
        that.butShow = true
      }
    });
  },
  created() {
    var token = localStorage.getItem("token");
    if (token) {
      currentpacketstep().then(res => {
        console.log(res.data.router)
        this.$router.push('/' + decodeURIComponent(res.data.router))
      })
    }


  }
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}

.loginPage {
  width: 100%;
  height: 100%;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.top {
  width: 100%;
}

.in {
  width: 100%;
  height: 62px;
  border-radius: 26px;
  margin-top: 20px;
  background-image: url(../src/assets/images/login/手机输入框.png);
  background-size: 100% 100%;
  display: flex;
  align-items: center;

  .ppp {
    border: none;
    width: 200px;
    height: 42px;
    margin-left: 80px;
    font-size: 20px;
    margin-top: -3px;

  }

  .sss {
    border: none;
    width: 140px;
    height: 46px;
    margin-left: 80px;
    font-size: 20px;
    margin-top: -3px;
  }

  input::placeholder {
    color: #C5C5C5;
    font-size: 18px;
  }

  .ccc {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 15px;
  }

  .time {
    font-size: 15px;
    color: #999;
  }

  .line {
    width: 3px;
    height: 16px;
    margin-right: 10px;

  }

  .yzm {
    width: 75px;
    height: 16px;
    display: block;
  }

}

.inin {
  background-image: url(../src/assets/images/login/验证码输入框.png);
  background-size: 100% 100%;
  // margin-top: -3px;
}

.icon1 {
  width: 22px;
  height: 25px;
  margin-left: 25px;
}

.icon2 {
  width: 25px;
  height: 25px;
  margin-left: 25px;
}

.loginbtn {
  width: 100%;
  margin-top: 20px;

  img {
    width: 100%;
  }
}

.bottom {
  width: 280px;
  height: 28px;
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  margin: 0 auto;
  // margin: 160px auto;
  display: flex;
  align-items: center;
  justify-content: space-around;

  .gou {
    width: 16px;
    height: 16px;
  }

  p {
    font-size: 16px;

    span {
      color: #76A1ED;
      border-bottom: 1px solid #76A1ED;
    }
  }
}

.loginFail {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  .fffail {
    width: 364px;
    height: 456px;
    background-image: url(../src/assets/images/login/登录失败.png);
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;

    p {
      font-size: 20px;
      color: #666666;
      margin-top: 10px;
    }

    .failed {
      width: 144px;
      height: 36px;
      margin-top: 150px;
      margin-bottom: 15px;
    }

    .qd {
      width: 100%;
      position: absolute;
      bottom: 30px;
      left: 0;
      right: 0;
      margin: 0 auto;
    }
  }
}

.van-divider {
  width: 295px;
  // height: 2px;
  color: #D7D7D7;
  margin-bottom: 10px;
}


.toast {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  .tosat-center {
    width: 100%;
    height: 564px;
    background-image: url(../src/assets/images/login/用户隐私协议.png);
    background-size: 100%;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;

    span {
      font-size: 22px;
      color: #666666;
      font-weight: 600;
      margin-top: 150px;
    }

    .center11 {
      width: 290px;
      height: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      font-size: 15px;
      color: #666666;
      margin-top: 30px;

      p {
        margin-bottom: 5px;
        text-indent: 25px;
        line-height: 26px;
      }

      .center {
        text-align: center;
        font-weight: 600;
      }
    }

    .button2 {
      text-align: center;
      height: 280px;
      // background-color: pink;
      margin-bottom: 10px;

      :nth-child(1) {
        width: 342px;
        height: 55px;
        display: block;
      }

      :nth-child(2) {
        width: 40px;
        height: 25px;
      }
    }
  }
}
</style>
